<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script>
        function checkUserName(){
            //向服务器发送AJAX的GET请求，第一个参数为URL路径，第二个参数为请求数据
            axios.get("/user/checkName",{
                params:{//请求参数
                    userName:$("name").value
                }
            }).then(resp =>{ //处理响应信息，resp为响应对象
                 var str = resp.data;//得到响应信息的消息体内容
                if(str == "ok"){
                    $("nameSpan").innerHTML = "该用户已存在";
                    $("nameSpan").style.color = "red";
                }
                else{
                    $("nameSpan").innerHTML = "可以使用";
                    $("nameSpan").style.color = "green";
                }
            });
        }

        function $(id){
            return document.getElementById(id);
        }

        window.onload = function (){
            showData();
        }

        function showData(){
            axios.get("/user/getList").then(resp =>{
                //如果服务器发送的是json字符串，会转化为json对象
                var info = resp.data;
                var str = "";
                info.forEach(n =>{
                    str += `<tr><td>${n.id}</td><td>${n.name}</td><td>${n.birthday}</td></tr>`;
                })
                $("data").innerHTML = str;
            })
        }

        function send(){
            axios.get("/speak").then(resp =>{
                // alert(resp.data);
                $("mydiv").innerHTML = resp.data;
            });
        }
    </script>
</head>
<body>
    用户名：<input type="text" id="name" onblur="checkUserName()">
    <span id="nameSpan"></span><br>
    电话：<input type="text" id="phone"><br>
    <a href="/user/checkName?userName=java">提交</a>

    <table border="1" width="60%" cellspacing="0">
        <thead><tr><th>编号</th><th>姓名</th><th>生日</th></tr></thead>

        <tbody id="data"></tbody>
    </table>

    <input type="button" value="发出请求" onclick="send()">
    <div id="mydiv"></div>
</body>
</html>